<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>picker</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .picker {
      position: fixed;
      bottom: 0;
      left: 0;
      box-shadow: 0 0 10px 2px #eee;
      right: 0;
      height: 250px;
    
    }

    .the-picker-outer {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .picker-box {
      transform: translate3d(0, 0, 0);
      flex: 1;
      margin-top: 100px;
      /* position: absolute;
      top: 100px;
      left: 0;
      right: 0;
      height: auto; */
      background-color: yellow;
    }

    .picker-box>div {
      height: 50px;
      line-height: 50px;
      text-align: center;
    }

    .picker-indicator {
      width: 100%;
      height: 50px;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }

    .picker-indicator::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 90%;
      height: 1px;
      background-color: #ccc;
      transform: scaleY(0.5) translateX(-50%);
    }

    .picker-indicator::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 90%;
      height: 1px;
      background-color: #ccc;
      transform: scaleY(0.5) translateX(-50%);
    }

    .picker-mask {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 100%;
      transform: translateY(-50%);
      background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
        linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, .6));
      background-repeat: no-repeat;
      background-position: top, bottom;
      background-size: 100% 100px;
      z-index: 3;
    }
  </style>
</head>

<body>
  <div class="picker">
    <div class="picker-mask"></div>
    <!-- <div class="picker-indicator"></div> -->
    <div class="the-picker-outer">
      <div class="picker-box">
 
      </div>
    </div>



  </div>

</body>
<script type="text/javascript">
  window.onload = function () {
    const words = ['长城', '故宫', '西湖', '西施', '南瓜', '冬瓜', '西瓜', '西瓜', '西瓜', '西瓜'];
    const picker_mask = document.querySelector(".picker-mask");
    const picker_box = document.querySelector(".picker-box");

    for (let i = 0; i < words.length; i++) {
      let divDom = document.createElement('div');
      divDom.innerHTML = words[i];
      picker_box.appendChild(divDom); // 遍历塞入
    }

    const box_div = document.querySelector('.picker-box > div');
    const lineHeight = box_div.offsetHeight; //每行的高度

    let targetY = 0;
    let startY = 0;
    let moveY = 0;

    picker_mask.addEventListener("touchstart", function (e) {
      e = e || window.event;
      startY = e.changedTouches[0].clientY;
    });

    picker_mask.addEventListener("touchmove", function (e) {
      e = e || window.event;
      moveY = e.changedTouches[0].clientY - startY;

      targetY += moveY;
      startY = e.changedTouches[0].clientY;
      picker_box.style.transform = "translate3d(0, " + targetY + "px, 0)";
    });

    picker_mask.addEventListener("touchend", function (e) {
      e = e || window.event;

      picker_box.style.transition = 'transform .3s ease';
      if (targetY >= 0) {
        targetY = 0;
      } else if (targetY <= -(words.length - 1) * lineHeight) {
        targetY = -(words.length - 1) * lineHeight;
      } else {
        targetY = myRound(targetY, lineHeight) * lineHeight;
      }

      picker_box.style.transform = "translate3d(0, " + targetY + "px, 0)";
      picker_box.addEventListener('transitionend', removeTrans);
    });

    function removeTrans() {
      picker_box.style.transition = '';
      picker_box.removeEventListener('transitionend', removeTrans);
    }

    function myRound(x, y) {
      x = -x;
      const ret = x / y - parseInt(x / y);
      if (ret > 0.3) {
        return -(parseInt(x / y) + 1);
      } else {
        return -parseInt(x / y);
      }
    }
  }
</script>

</html>